<template>
  <div id="normal">
    <!-- 正常人群分布 -->
  </div>
</template>
<script type="text/javascript">
import axios from "@/utils/axios";
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var map = new AMap.Map("normal", {
        center: [116.400389, 39.93729],
        features: ["bg", "road"],
        mapStyle: "amap://styles/grey",
        rotation: 0,
        zoom: 11.3,
        viewMode: "3D",
        pitch: 0,
        skyColor: "#33216a"
      });

      var layer = new Loca.ScatterPointLayer({
        map: map
      });

      var colors = ["#07E8E4", "#AD92D1", "#3346BD", "#EBEB8D", "#7FC97F"];

      // 10万辆北京公共交通车辆
      $.get("//a.amap.com/Loca/static/mock/traffic_110000.csv", function(csv) {
        layer.setData(csv.slice(0, 10000), {
          lnglat: function(obj) {
            var value = obj.value;
            return [value["lng"], value["lat"]];
          },
          type: "csv"
        });

        layer.setOptions({
          unit: "px",
          style: {
            // 根据车辆类型设定不同半径
            radius: function(obj) {
              var value = obj.value;
              switch (parseInt(value.type)) {
                case 3:
                  return 3;
                case 4:
                  return 3;
                case 41:
                  return 3;
                case 5:
                  return 3;
                default:
                  return 3;
              }
            },
            height: 0,
            // 根据车辆类型设定不同填充颜色
            color: function(obj) {
              var value = obj.value;
              switch (parseInt(value.type)) {
                case 3:
                  return colors[0];
                case 4:
                  return colors[1];
                case 41:
                  return colors[2];
                case 5:
                  return colors[3];
                default:
                  return colors[4];
              }
            },
            opacity: 1
          }
        });

        layer.render();
      });
    }
  }
};
</script>
<style >
#normal {
  height: calc(100vh - 50px);
}
</style>